<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    <head th:replace="common :: header"/>
<body>
<div class="page">
	<div class="card">
		<div class="card-body">
			<div id="table"></div>
            <div id="toolbar" style="display: none">
                <a shiro:hasPermission="system:menu:add" href="#" onclick="add()" class="easyui-linkbutton"
                   data-options="iconCls:'icon-add',plain:true">增加</a>
                <a shiro:hasPermission="system:menu:edit" href="#" onclick="edit()" class="easyui-linkbutton"
                   data-options="iconCls:'icon-edit',plain:true">修改</a>
                <a shiro:hasPermission="system:menu:delete" href="#" onclick="remove()" class="easyui-linkbutton"
                   data-options="iconCls:'icon-cancel',plain:true">删除</a>
                <a href="#" class="easyui-linkbutton" id="btnCollapse" title="折叠" data-options="iconCls:'icon-set',plain:true" style="display: none">折叠</a>
                <a href="#" class="easyui-linkbutton" id="btnExpand" title="展开" data-options="iconCls:'icon-set',plain:true">展开</a>
            </div>
        </div>
	</div>
</div>
<script type="text/javascript">
// 记录节点展示状态，刷新时保持当前的展开状态
var recordNodes = new Array();
$(function() {
	$('#table').treegrid({
	    url: '/system/menu/list',
	    idField: 'menuId',
	    treeField: 'menuName',
	    fit: true,
        fitColumns: true,
        singleSelect: true,
        toolbar: '#toolbar',
        onLoadSuccess: function () {
            //将记录已展开节点ID的数组容器转存到另一个数组容器中
            var list = [];
            for (var j = 0; j < recordNodes.length; j++) {
                list.push(recordNodes[j])
            }
            //这里必须将已记录的节点转存到另一个数组中,
            //因为执行collapseAll方法后,会触发onBeforeCollapse事件
            //会清空已记录的节点数据
            $("#table").treegrid("collapseAll");
            for (var i = 0; i < list.length; i++) {
                $('#table').treegrid('expand', list[i]);
            }
        },
        onBeforeExpand: function (node) {
            //每次执行展开一个节点的操作时,记录被展开的节点ID
            recordNodes.push(node.menuId.toString());
        },
        onBeforeCollapse: function (node) {
            //每次执行折叠一个节点的操作时
            //数组容器去除被折叠的节点ID
            var i = recordNodes.indexOf(node.menuId.toString());
            if (i >= 0) recordNodes.splice(i, 1);
        },
        columns:[ [
			{field: 'ck', checkbox: true },
			{title: '名称', field:'menuName', width:200, align:'left'},
            {title: '图标', field: 'icon',width: 40, align:'center',
                formatter: function(value, row) {
                    return '<i class="layui-icon '+ value +'"></i>';
                }
            },
            {title: '路径', field:'url', width:180, align:'center'},
            {title: '权限', field:'perms', width:180, align:'center'},
			{title: '类型',field: 'menuType',width: 60, align:'center',
				formatter: function(value, row) {
					if (value == 1) return '目录';
					if (value == 2) return '菜单';
					if (value == 3) return '按钮';
				}
			},
			{title: '排序',field:'orderNum',width:60, align:'center'},
			{title: '是否显示',field: 'visible',width: 60, align:'center',formatter: function (value,row) {
                    if(row.menuType<3){
                        if (value == 0 ) return '<span class="layui-badge layui-bg-green">显示</span>';
                        if (value == 1 ) return '<span class="layui-badge">不显示</span>';
                    }
                }
			}
	    ] ]
    })
});

function add() {
    // dm.openTab('新增菜单', '/system/menu/add/0');
    var row = $('#table').treegrid("getSelected");
    if (!row) {
        dm.openDialog('新增菜单', '/system/menu/add/0');
    } else if (row.type == 3) {
        dm.msgWarning("选中菜单的类型为“按钮”，不允许添加子节点！");
    } else {
        dm.openDialog('新增菜单', '/system/menu/add/'+row.menuId);
    }
}
function edit() {
    dm.getRow('table', function(row) {
        dm.openDialog('修改菜单','/system/menu/edit/'+row.menuId);
    })
}

function remove() {
    dm.getRow('table',function(row) {
        dm.confirm('删除操作不可恢复。您确定要删除该菜单吗？', function () {
            dm.post('/system/menu/delete/' + row.menuId, {}, function () {
                dm.search('table', null, 'treegrid');
                $('#btnCollapse').show();
                $('#btnExpand').hide();
            })
        })
    })
}

$('#btnExpand').click(function() {
    $('#table').treegrid('expandAll');
    $(this).hide();
    $('#btnCollapse').show();
});

$('#btnCollapse').click(function() {
    $('#table').treegrid('collapseAll');
    $(this).hide();
    $('#btnExpand').show();
});

</script>
</body>
</html>
